<template>
  <el-row :gutter="10" style="height: 100%">
    <el-col :span="1">
      <div style="width: 5px;height: 100%;background-color: #22ccee;float: right"></div>
    </el-col>
    <el-col :span="23">
      <p style="font-weight: bold;float: left">修改患者信息</p>
    </el-col>
  </el-row>
  <el-row class="rowI">
    <el-col :span="20">
      <el-row class="rowI">
        <el-col :span="12">
          <el-row>
            <el-col :span="10">
              <div class="divLeft">姓名 :</div>
            </el-col>
            <el-col :span="14">
              <el-input v-model="patient.nickname" class="colInput"/>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="2">
              <div class="divRight">性别 :</div>
            </el-col>
            <el-col :span="22">
              <el-select v-model="patient.gender" class="colInputRight" placeholder="请选择">
                <el-option v-for="item in c1" :value="item.value"/>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="rowI">
        <el-col :span="12">
          <el-row>
            <el-col :span="10">
              <div class="divLeft">手机号码 :</div>
            </el-col>
            <el-col :span="14">
              <el-input v-model="patient.mobile" class="colInput"/>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="2">
              <div class="divRight">年龄 :</div>
            </el-col>
            <el-col :span="22">
              <el-input v-model="patient.age" class="colInputRight"/>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="rowI">
        <el-col :span="12">
          <el-row>
            <el-col :span="10">
              <div class="divLeft">出生年月 :</div>
            </el-col>
            <el-col :span="14">
              <div style="margin-left: -80px">
                <el-date-picker v-model="patient.birthday" type="date" placeholder="请选择" format="YYYY/MM/DD"/>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="2">
              <div class="divRight">民族 :</div>
            </el-col>
            <el-col :span="22">
              <el-select v-model="patient.ethnicGroup" class="colInputRight" placeholder="请选择">
                <el-option v-for="item in c2" :value="item.value"/>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="rowI">
        <el-col :span="12">
          <el-row>
            <el-col :span="10">
              <div class="divLeft">证件类型 :</div>
            </el-col>
            <el-col :span="14">
              <el-select v-model="patient.documents" class="colInput" placeholder="请选择">
                <el-option v-for="item in c5" :value="item.value"/>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="2">
              <div class="divRight">证件号码 :</div>
            </el-col>
            <el-col :span="22">
              <el-input v-model="patient.idNumber" class="colInputRight"/>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="rowI">
        <el-col :span="12">
          <el-row>
            <el-col :span="10">
              <div class="divLeft">是否有遗传病史 :</div>
            </el-col>
            <el-col :span="14">
              <el-select v-model="patient.isGenetic" class="colInput" placeholder="请选择">
                <el-option v-for="item in c3" :value="item.value"/>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="12">
          <el-row>
            <el-col :span="2">
              <div class="divRight">婚姻情况 :</div>
            </el-col>
            <el-col :span="22">
              <el-select v-model="patient.maritalStatus" class="colInputRight" placeholder="请选择">
                <el-option v-for="item in c6" :value="item.value"/>
              </el-select>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="rowI">
        <el-col :span="4">
          <div class="textDiv">通讯地址 :</div>
        </el-col>
        <el-col :span="20">
          <el-input v-model="patient.address" class="textInput"/>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="4">
          <div class="textDiv">备注 :</div>
        </el-col>
        <el-col :span="20">
          <el-input v-model="patient.remark" type="textarea" :rows="4" class="textInput"/>
        </el-col>
      </el-row>
    </el-col>
    <el-col :span="4">
      <div style="width: 234px;height: 100%;border: 1px solid gray;margin-left: -300px">
        <img v-if="patient.imgUrl!=null&patient.imgUrl!==''&fileList.length===0" :src="BASE_URL+patient.imgUrl"
             style="margin-top: 10px;border-radius: 5px;width: 214px;height: 280px"
             alt="人物头像"/>
        <img v-if="patient.imgUrl==null||patient.imgUrl===''&&fileList.length===0"
             style="margin-top: 10px;border-radius: 5px;width: 214px;height: 280px"
             src="https://demo2022.axureshop.com/2201312/images/%E6%82%A3%E8%80%85%E7%AE%A1%E7%90%86/u1990.svg"
             alt="人物头像"/>
        <el-upload
            :limit="1"
            name="file"
            list-type="picture-card"
            v-model:file-list="fileList"
            :action="BASE_URL+'/v1/upload'"
            :on-success="handleSuccess"
        >
          <el-button style="margin:31px 110px 0 0;width: 100px;background-color: #409EFF;
                color: white;border: 1px solid #409EFF">
            选择
          </el-button>
          <template #file="{ file }">
            <img :src="file.url" alt="人物头像" class="fileImg"/>
          </template>
          <template #tip>
            <div v-if="fileList.length>0" style="height: 25px"></div>
            <div style="font-weight: bold;font-size: 15px;margin-top: 15px" class="divPhoto">照片要求:</div>
            <div class="divPhoto">1.仅支持jpg、png、bmp格式</div>
            <div class="divPhoto">2.最大不超过2000px,最小不低于160px</div>
          </template>
        </el-upload>
        <el-button style="position:absolute;top:295px;left: 1160px;width: 100px;background-color: white;
                color: #409EFF;border: 1px solid #409EFF" @click="handleRemove">
          清空
        </el-button>
      </div>
    </el-col>
  </el-row>
  <el-row :gutter="10" style="margin-top: 20px">
    <el-col :span="12" style="padding-right: 100px">
      <el-button style="float: right;background-color: #409EFF;color: white;width: 80px" @click="save">保存</el-button>
    </el-col>
    <el-col :span="12" style="padding-left: 100px">
      <el-button style="float: left;color: #409EFF;border: 1px solid #409EFF;width: 80px" @click="router.push('/admin/patient')">返回</el-button>
    </el-col>
  </el-row>
</template>

<script setup>
import {onMounted, ref} from 'vue'
import router from "@/router";
import axios from "axios";
import {ElMessage} from "element-plus";
import qs from "qs";

const fileList = ref([]);
const fileListLow = ref();
const handleSuccess = (uploadFile) => {
  fileListLow.value = uploadFile.data;
}
const handleRemove = () => {
  if (fileListLow !== undefined) {
    patient.value.imgUrl = null;
    fileList.value.pop();
    axios.post(BASE_URL + '/v1/remove?imgUrl=' + fileListLow.value);
  }
};

const patient = ref({})
const c1 = [{value: '男'}, {value: '女'}]
const c2 = [{value: '汉族'}]
const c3 = [{value: '是'}, {value: '否'}]
const c5 = [{value: '身份证'}, {value: '护照'}, {value: '驾驶证'}, {value: '警官证'}, {value: '港澳通行证'}, {value: '其他证件'}]
const c6 = [{value: '已婚'}, {value: '未婚'}, {value: '离异'}]

const userToken = ref(localStorage.getItem('user-token')?
    JSON.parse(localStorage.getItem('user-token')):null);
const userId = ref(localStorage.getItem('user-id')?
    JSON.parse(localStorage.getItem('user-id')):null);

onMounted(()=>{
  if (userToken.value == null) {
    ElMessage.error("请先登录!");
    router.push('/patient/login');
    return;
  }
  axios.defaults.headers.common['Authorization']=userToken.value;
  if (location.search.includes('id')) {
    let id = new URLSearchParams(location.search).get('id');
    axios.get(BASE_URL + '/v1/patients/' + id + '/select').then((response) => {
      if (response.data.code === 20000) {
        patient.value = response.data.data;
      }
    })
  }
})
const save = () => {
  if (fileList.value.length > 0) {
    axios.post(BASE_URL + "/v1/remove?imgUrl=" + patient.value.imgUrl);
    patient.value.imgUrl = fileList.value[0].response.data;
  }
  patient.value.userId = userId.value;
  let data = qs.stringify(patient.value);
  axios.post(BASE_URL + '/v1/patients/update', data).then((response) => {
    if (response.data.code === 20000) {
      ElMessage.success("修改完成!")
      router.push('/admin/patient')
    }
  })
}
</script>


<style scoped>
/deep/ .el-upload-list--picture-card {
  width: 214px;
  height: 0;
}

/deep/ .el-upload--picture-card {
  width: 214px;
  height: 0;
  border: none;
}

/deep/ .el-upload-list__item.is-success {
  width: 214px;
  height: 280px;
  margin: 10px 0 4px 0;
}

.fileImg {
  width: 214px;
  height: 280px;
}

.colInput {
  margin-left: -80px;
  width: 220px
}

.colInputRight {
  margin-left: -280px;
  width: 200px
}

.rowI {
  margin-bottom: 20px
}

.textDiv {
  margin-left: 200px;
  width: 100px;
  line-height: 30px;
  text-align: right;
}

.textInput {
  width: 667px;
  margin-left: -245px
}

.divLeft {
  margin-left: 170px;
  width: 130px;
  height: 30px;
  line-height: 30px;
  text-align: right
}

.divRight {
  margin-left: 20px;
  width: 80px;
  height: 30px;
  line-height: 30px;
  text-align: right
}

.divPhoto {
  font-size: 13px;
  text-align: left;
  padding-left: 20px
}
</style>
